import React, { Component } from 'react'
import './image_swiper.less'
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay } from 'swiper'
import 'swiper/swiper.less';
import { withRouter } from 'react-router-dom';
SwiperCore.use([Autoplay])

class ImageSwiper extends Component {


  goCourseDetail = (courseId) => {
    return () => {
      this.props.history.push({
        pathname: '/course-detail',
        search: "courseId=" + courseId
      })
    }
  }

  render() {
    const { swiperList, autoplayTime } = this.props
    return (
      <Swiper
        className="myswiper-container"
        style={{ ...this.props.style }}
        loop
        autoplay={{ disableOnInteraction: false, delay: autoplayTime }}
      >
        {
          swiperList.map(item => {
            return <SwiperSlide className="myswiper-item" key={item.id}  onClick={this.goCourseDetail(item.courseId)}>
              <img src={item.url} alt="swiper" />
              <h1>{item.title}</h1>
              <p>{item.description}</p>
            </SwiperSlide>
          })
        }
      </Swiper>
    )
  }
}
export default withRouter(ImageSwiper)

